import { Component, Prop, Ref, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import BasicInfo from './BasicInfo'
import AccountSetting from './AccountSetting'
import { getPriodInfo } from '@/api/company'
import type { CompanyInfoDto, PeriodInfoDto } from '@/api/company/types'
import InsuranceCheck from './InsuranceCheck'
import InsurancePeople from './InsurancePeople'
import { Col, Row } from 'ant-design-vue'
@Component({
    expose: ['getData']
})
export class PeriodInsuranceView extends Render {
    @Prop() companyId!: number
    @Prop() companyBasicInfo!: CompanyInfoDto

    @Ref insuranceCheckRef: typeof InsuranceCheck | undefined
    @Ref insurancePeopleRef: typeof InsurancePeople | undefined

    basicData = {} as PeriodInfoDto

    async getData() {
        await this.getBasicInfoData()
        this.$nextTick(() => {
            this.insuranceCheckRef?.getData()
            this.insurancePeopleRef?.getData()
        })
    }

    async getBasicInfoData() {
        const res = await getPriodInfo(this.companyId)
        this.basicData = res
    }

    onRefresh() {
        this.getBasicInfoData()
        this.getData()
    }

    onMounted() {
        this.getData()
    }

    render() {
        return (
            <Row gutter={20}>
                <Col xl={16} lg={16} md={24} sm={24} xs={24}>
                    <BasicInfo
                        basicData={this.basicData}
                        companyBasicInfo={this.companyBasicInfo}
                        onRefresh={this.getData}
                    />
                    <div class="mt-20px">
                        <InsuranceCheck
                            ref="insuranceCheckRef"
                            basicData={this.basicData}
                            companyBasicInfo={this.companyBasicInfo}
                            onRefresh={this.getData}
                        />
                    </div>
                    <div class="mt-20px">
                        <InsurancePeople
                            ref="insurancePeopleRef"
                            basicData={this.basicData}
                            companyBasicInfo={this.companyBasicInfo}
                            onRefresh={this.getData}
                        />
                    </div>
                </Col>
                <Col xl={8} lg={8} md={24} sm={24} xs={24}>
                    <AccountSetting
                        basicData={this.basicData}
                        companyBasicInfo={this.companyBasicInfo}
                        onRefresh={this.onRefresh}
                    />
                </Col>
            </Row>
        )
    }
}

export default toNative<{ companyId: number; companyBasicInfo: CompanyInfoDto }, {}>(
    PeriodInsuranceView
)
